<template>
	<view class="balance-records">
		<base-navbar back-color="#fff" title="我的推广"></base-navbar>
		<view style="padding: 20rpx;background-color: #f3f3f3">
			<!-- <u-sticky>
				<u-search border-color="#D3D3D3" shape="square" :show-action="false" placeholder="输入昵称/id/手机号码"
					v-model="keyword"></u-search>
			</u-sticky> -->
			<view class="nav-search">
				<uni-search-bar v-model="keyword" placeholder="输入昵称/id/手机号码" cancel-button="" radius="32"
					@keydown.enter="searchMember"></uni-search-bar>
			</view>
		</view>
		<view class="content" v-if="spreadList.length>0">
			<member-list :list="spreadList"></member-list>
		</view>
		<view v-else>
			<c-empty title="暂无推广数据"></c-empty>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import checkLogin from '@/utils/login';
	import {
		ref,
		reactive,
		toRefs,
		inject
	} from 'vue';
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		keyword: '',
		spreadList: [],
		isMore: false,
	});

	onLoad((opt) => {});

	onShow(() => {
		//登录过期自动登录
		if (!checkLogin()) {
			pageRoute('/pages/users/login/login');
		} else {
			getSpreadList();
		}
	})

	onPullDownRefresh((e) => {
		console.log("下拉刷新");
	});

	onReachBottom((e) => {
		console.log("上拉加载更多", state.isMore);
		if (state.isMore) {
			getSpreadList();
		}
	});

	function getSpreadList() {
		request.get('promotion/list', {
			keyword: state.keyword,
			skip: state.spreadList.length,
			limit: 10,
		}).then(res => {
			console.log('推广列表', res);
			state.isMore = res.data.is_more;
			if (state.spreadList.length == 0) {
				state.spreadList = res.data.data;
			} else {
				state.spreadList = state.spreadList.concat(res.data.data);
			}
		})
	}

	function searchMember() {
		state.spreadList = [];
		getSpreadList();
	}

	const {
		keyword,
		spreadList,
		isMore
	} = toRefs(state);
</script>

<style lang="scss">
	.balance-records {
		.content {
			margin-top: -$m24;
			background-color: #f3f3f3
		}
	}
</style>